<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总客户数" v-if="this.indexData.member"
                    :total="`${this.indexData.member.member_total_count ? this.indexData.member.member_total_count : 0 }`">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;">
              <span slot="term">今日新增</span>
              {{ this.indexData.member.member_curr_count ? this.indexData.member.member_curr_count : 0 }}
            </trend>
            <trend flag="up">
              <span slot="term">昨日新增</span>
              {{ this.indexData.member.member_bef_count ? this.indexData.member.member_bef_count : 0 }}
            </trend>
          </div>
          <template slot="footer">较昨日：
            <span>{{ (this.indexData.member.member_curr_count ? this.indexData.member.member_curr_count : 0) - (this.indexData.member.member_bef_count ? this.indexData.member.member_bef_count : 0) }}</span>
          </template>
        </chart-card>
      </a-col>
      <a-col v-if="this.indexData.online" :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="商城今日销售额"
                    :total="`￥ ${this.indexData.online.total_pay ? this.indexData.online.total_pay : 0 }`">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-area :data-source="this.indexData.onlineMiniAreaData"/>
          </div>
          <template slot="footer">有效订单数量：
            <span> {{ this.indexData.online.total_count ? this.indexData.online.total_count : 0 }}</span></template>
        </chart-card>
      </a-col>
      <a-col v-if="this.indexData.store" :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="门店今日销售额"
                    :total="`￥ ${this.indexData.store.total_pay ? this.indexData.store.total_pay : 0 }`">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o"/>
          </a-tooltip>
          <div>
            <mini-area :data-source="this.indexData.storeMiniAreaData"/>
          </div>
          <template slot="footer">有效订单数量：
            <span> {{ this.indexData.store.total_count ? this.indexData.store.total_count : 0 }}</span></template>
        </chart-card>
      </a-col>
    </a-row>


    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs v-if="this.indexData.barMultidData" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <!--<div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{width: '256px'}" />
          </div>-->
          <a-tab-pane  :loading="loading" tab="销售额" key="1">
            <a-row>
              <!--              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">-->
              <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
                <!--                <bar title="销售额 (单位：万)" :dataSource="this.indexData.onlineBarData"/>-->
                <bar-multid title="销售额 (单位：万)" :height="height" :dataSource="this.indexData.barMultidData" :fields="this.indexData.barMultidfields"/>
              </a-col>
              <!--              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                              <rank-list title="本月销售排行榜" :list="this.indexData.rankData"/>
                            </a-col>-->
            </a-row>
          </a-tab-pane>
          <!--          <a-tab-pane v-if="this.indexData.store" loading="true" tab="门店销售额" key="2">
                      <a-row>
                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                          <bar title="销售额 (单位：万)" :dataSource="this.indexData.storeBarData"/>
                        </a-col>
                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                          <rank-list title="本月销售排行榜" :list="this.indexData.storeRankData"/>
                        </a-col>
                      </a-row>
                    </a-tab-pane>-->
        </a-tabs>
      </div>
    </a-card>

    <!--<a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问次数统计" :style="{ marginTop: '24px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日访问IP数" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="environment" style="font-size: 24px"  />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问次数" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="team" style="font-size: 24px"  />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="访问总次数" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class='circle-cust'>
                <a-icon slot="indicator" type="rise" style="font-size: 24px"  />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row>-->

  </div>
</template>

<script>

import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { getAction } from '@/api/manage'
import BarMultid from '@/components/chart/BarMultid'


export default {
  name: 'IndexChart',
  components: {
    BarMultid,
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo
  },
  data() {
    return {
      height: 380,
      loading: true,
      tabLoading: false,
      center: null,
      //rankList,
      //barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indexData: {},
      indexRegisterType: 'date',
      url: {
        indexInit: '/home/homePage/indexInit',
        indexInitStore: '/home/homePage/indexInitStore',
      },
      indicator: <a-icon type="loading" style="font-size: 24px" spin/>
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
  },
  computed: {
    total() {
      return `${this.indexData.member.member_total_count ? this.indexData.member.member_total_count : 0}`
    }
  },
  methods: {
    initLogInfo() {
      getAction(this.url.indexInit).then((res) => {
        if (res.success) {
          this.indexData = res.result
          console.log(this.indexData)
          if (!this.indexData.member) {
            this.indexData.member = {}
          }
        }
      })
      /*getLoginfo(null).then((res)=>{
        if(res.success){
          Object.keys(res.result).forEach(key=>{
            res.result[key] =res.result[key]+""
          })
          this.loginfo = res.result;
        }
      })
      getVisitInfo().then(res=>{
        if(res.success){
           this.visitInfo = res.result;
         }
       })*/
    },
  }
}
</script>

<style lang="less" scoped>
  .circle-cust{
    position: relative;
    top: 28px;
    left: -100%;
  }
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  /* 首页访问量统计 */
  .head-info {
    position: relative;
    text-align: left;
    padding: 0 32px 0 0;
    min-width: 125px;

    &.center {
      text-align: center;
      padding: 0 32px;
    }

    span {
      color: rgba(0, 0, 0, .45);
      display: inline-block;
      font-size: .95rem;
      line-height: 42px;
      margin-bottom: 4px;
    }
    p {
      line-height: 42px;
      margin: 0;
      a {
        font-weight: 600;
        font-size: 1rem;
      }
    }
  }
</style>